<!-- My Bots -->
<!-- Author: Edwin -->
<template>
  <el-card shadow="never"
           class="aui-card--fill">
    <add-or-update v-if="addOrUpdateVisible"
                    ref="addOrUpdate"
                    @refreshDataList="getDataList"></add-or-update>
    <div>
      <el-form :inline="true">
        <el-form-item>
          <el-button type="primary" size="small"  @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
        </el-form-item>
      </el-form>
      <div class="control-section">
        <div class="content-wrapper"
              v-loading="loading">
          <ejs-treegrid :dataSource="comDataList"
                        :allowSorting="true"
                        :allowResizing="true"
                        :allowReordering="true"
                        :allowFiltering="true"
                        :filterSettings="filterSettings"
                        childMapping="subList"
                        :treeColumnIndex="1"
                        :searchSettings='searchSettings'
                        :toolbar='toolbar'
                        :height="window.innerHeight - 300"
                        :editSettings="editSettings"
                        :actionBegin="actionBegin"
                        ref="grid">
            <e-columns>
              <e-column field='name'
                        :headerText="$t('custom.botStore.name')"
                        :width='120'></e-column>
              <e-column field='version'
                        :headerText="$t('custom.botStore.version')"
                        :width='80'></e-column>
              <e-column field='description'
                        :headerText="$t('custom.botStore.description')"
                        :width='120'></e-column>
              <e-column field='createTime'
                        :headerText="$t('custom.botStore.createTime')"
                        :width='80'
                        :template='CreateTimeFormat'
                        ></e-column>
              <e-column field='updateTime'
                        :headerText="$t('custom.botStore.updateTime')"
                        :width='80'
                        :template='UpdateTimeFormat'
                        ></e-column>
              <e-column :width='80'
                        :commands='commands'>
              </e-column>
            </e-columns>
          </ejs-treegrid>

        </div>
      </div>
    </div>
  </el-card>
</template>
<script>
import mixinViewModule from '@/mixins/crud-view-modul-plus'
import AddOrUpdate from './add-or-update'
import CreateTimeFormat from './FormatComponents/CreateTimeFormat'
import UpdateTimeFormat from './FormatComponents/UpdateTimeFormat'
import { LinkComponent } from './FormatComponents/LinkComponent.js'
import { deleteBotInfoApi } from '@/api/new'

export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/web/bots/sys/bot/list',
        getDataListIsPage: false
      },
      dataForm: {

      },
      scope: [],
      loading: false,
      commands: [
        { type: 'Edit',
          buttonOption:
          { content: this.$t('custom.bots.editbtn'),
            cssClass: 'e-outline e-small e-primary'
          }
        },
        { type: 'Delete',
          buttonOption:
          { content: this.$t('custom.bots.deletebtn'),
            cssClass: 'e-outline e-small e-danger'
          }
        }
      ],
      editSettings: {
        allowDeleting: false,
        allowEditing: true,
        allowAdding: false,
        mode: 'Cell'
      },
      pageSettings: { pageSize: 100, pageSizes: [50, 100, 200, 1000], pageCount: 4 },
      CreateTimeFormat: function () {
        return { template: CreateTimeFormat }
      },
      UpdateTimeFormat: function () {
        return { template: UpdateTimeFormat }
      },
      filterSettings: { type: 'Menu', hierarchyMode: 'Parent' },
      searchSettings: { hierarchyMode: 'Both' },
      toolbar: ['Search']
    }
  },
  components: {
    AddOrUpdate

  },
  props: {

  },

  computed: {
    comDataList () {
      var retdata = []
      retdata = this.dataList
      return retdata
    }
  },
  created () {
    this.init()
    LinkComponent.$on('initPageList', () => {
      this.getDataList()
    })
  },
  methods: {
    init () {

    },
    commandClick (e) {
      if (e.commandColumn.type === 'Edit') {
        this.addOrUpdateHandle(e.rowData.id)
      }
      if (e.commandColumn.type === 'Delete') {
        this.deleteHandle(e.rowData.id)
      }
    },
    actionBegin (e) {
      if (e.type === 'save' && e.columnName === 'taapValue') {
        const params = e.rowData
        this.$interface.accounting.updateAccountingTaap(params)
          .then(({ data: res }) => {
            if (res.code !== 0) {
              return this.$message.error(res.msg)
            }
            return this.$message.success(res.msg)
          })
      }
      if (e.type === 'actionBegin' && e.requestType === 'beginEdit') {
        const data = e.rowData
        this.openDialogWithTBG(data)
      }
    },
    deleteHandle (e) {
      const params = {
        id: e
      }
      deleteBotInfoApi(params).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.getDataList()
        return this.$message.success(res.msg)
      })
    }

  }
}
</script>
<style scoped>
.content-wrapper ::v-deep .sortingenabled {
  margin-top: 0px;
}
.e-grid .e-columnheader.e-wrap .e-fltr-icon .e-sortfilterdiv, .e-grid.e-wrap .e-columnheader .e-fltr-icon .e-sortfilterdiv {
    margin: -28px 8px -29px 0;
}
</style>
